<template>
  <div class="orderList">
    <div
      v-if="newStatus === 0"
      class="big_box"
    >
      <div
        v-for="(item,index) in orderList"
        :key="index"
      >
        <div
          v-for="(items,index2) in item.oOrderDetails"
          :key="index2"
          class="goods_item_box"
        >
          <div class="goods_box_item item-row">
            <div
              class="left_img"
              @click="GoToSho(items)"
            >
              <img
                :src="items.DefaultImage"
                alt=""
              >
            </div>
            <div class="right_show">
              <div class="tls">
                {{ items.cProductName }}
              </div>
              <div class="price">
                ¥{{ items.fSalePrice }}
              </div>
            </div>
          </div>
          <div class="goods_box_item">
            <div
              class="again"
              @click="goComment(items)"
            >
              评论
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <div
      v-if="newStatus === 1"
      class="big_box"
    >
      <div
        v-for="(item,index) in orderList2"
        :key="index"
      >
        <div class="goods_item_box">
          <div class="goods_box_item item-row">
            <div 
              class="left_img"
              @click="GoToSho(item)"
            >
              <img
                :src="item.cProductDefaultImg"
                alt=""
              >
            </div>
            <div class="right_show">
              <div
                class="tls"
                style="display: flex;"
              >
                评分：
                <el-rate
                  v-model="item.iStars"
                  disabled
                  :colors="['#F0406F','#F0406F','#F0406F']"
                />
              </div>
              <div class="tls">
                内容：{{ item.cComment }}
              </div>
            </div>
          </div>
          <div class="goods_box_item">
            <div
              class="tls"
            >
              {{ item.dTime }}
            </div>
            <!-- <div
              class="again"
              @click="Reply(item)"
            >
              回复
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="pagination_box">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="PageTotal"
        :current-page.sync="pageIndex"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  _props: ["status"],
  get props() { 
    return this._props;
  },
  set props(value) {
    this._props=value;
  },
  data() {
    return {
      newStatus: "",
      orderList: [],
      orderList2: [],
      pageIndex: 1,
      pageSize: 10,
      currentItem: {},
      PageTotal: 0,
    };
  },
  watch: {
    status: function () {
      this.newStatus = this.status;
      console.log(this.newStatus);
      if(this.newStatus === 0) {
        this.orderList2 = [];
      } else {
        this.orderList = [];
      }
      this.pageIndex = 1
      this.getData(this.newStatus);
    },
  },

  created() {
    this.newStatus = this.status;
    console.log('created', this.newStatus);
  },
  mounted() {
    //获取订单列表
    this.getData(this.newStatus);
  },

  methods: {
    //去评价
    goComment(item) {
      console.log('去评价', item)
      this.$router.push({
        path: "/person/comment",
        query: {
          cOrderNo: item.cOrderNo,
          iShopId: item.iShopId 
        },
      });
    },
    // 去详情
    GoToSho(GoToSho) {
      console.log("去详情", GoToSho);
      this.$router.push({
        path: "/fruit/detail",
        query: {
          id: GoToSho.iProduct_Id||GoToSho.iProductId,
          iShopId: GoToSho.iShopId
        },
      });
    },
    // 分页获取当前页
    handleCurrentChange(val) {
      console.log('分页获取当前页', val)
      this.pageIndex = val
      this.getData(this.newStatus)
    },
    // 回复
    Reply(item) {
      console.log('回复',item)
    },
    //获取订单列表
    getData(statusName) {
      console.log('获取订单列表', statusName)
      if(statusName === 0) { // 待评论/我的订单已完成未评论的
        let params = {
          token: localStorage.getItem("token"),
          onLineOffLine: "0",
          orderType: "2",
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          status: 'UNREMARK',
        };
        this.$api.evaluate.getUserOrders(params).then((res) => {
          if (res.code == 200) {
            console.log("获取待评论列表", res.data);
            this.orderList = res.data.orders; // 订单列表
            this.PageTotal = res.data.count
          }
        })
      } else {
        console.log('获取已评论列表', statusName)
        let params = {
          token: localStorage.getItem("token"),
          data: {
            type: "2",
            pageIndex: this.pageIndex,
            pageSize: this.pageSize,
          }
        };
        this.$api.evaluate.query(params).then((res) => {
          console.log('获取已评论列表', res)
          this.orderList2 = res.data.models; // 已评论列表
          this.PageTotal  = res.data.modelsCount
        })
      }
    }
  },
};
</script>

<style scoped lang="scss">
.orderList {
  margin: 1.25rem 0;
  .big_box{
    max-height: 68rem;
    overflow-y: auto;
    overflow-x: hidden;
    .goods_item_box{
      // height: 12.81rem;
      height: 9rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      padding:0 1.7rem;
      margin-bottom: .56rem;
      .tls {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        color: #7b7b7b;
        font-size: 0.88rem;
        margin-bottom: 1.25rem;
        line-height: 1.2rem;
      }
      .item-row{
        display: flex;
        align-items: center;
        .left_img{
            width: 6rem;
            height: 6rem;
            cursor: pointer;
            margin-right: .69rem;
          img{
            width: 6rem;
            height: 6rem;
            cursor: pointer;
            margin-right: .69rem;
          }
        }
        .right_show{
          display: flex;
          flex-direction: column;
          margin: 0 .8rem;
          .price {
            width: 100%;
            line-height: 1.44rem;
            color: #f0406f;
            font-weight: bold;
          }
        }
      }
      
      .again {
        color: #f0406f;
        font-size: 0.88rem;

        &:hover {
          cursor: pointer;
          text-decoration: underline;
        }
      }
    }
  }
  .pagination_box{
    display: flex;
    justify-content: center;
    height: 3rem;
    align-items: center;
  }
}
</style>

<style>
.pagination_box .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: rgba(17, 17, 17, 1);
    color: #fff;
}
.pagination_box .el-pagination.is-background .el-pager li:hover {
    color: rgba(17, 17, 17, 1);
}
</style>